<template>
    <div>
        <!-- 头部 -->
        <page-header @toLastPage="toLastPage">
            <template v-slot:title>
                <div>
                    聊天信息（{{groupUserList.length}}）
                </div>
            </template>
        </page-header>
        <!-- 用户头像 -->
        <div class="avatar-wrapper flex">
            <!-- 头像列 -->
            <div class="avatar" v-for="(item,index) in groupUserList" :key="index">
            <van-image
            width="2rem"
            height="2rem"
            radius=".2rem"
            fit="cover"
            :src="item.avatar"
            @click="toUserDetail(item.id)"
            />
            <div class="name">
               {{item.name}}
            </div>
            </div>
            <!-- 添加box -->
            <div class="add" @click="addNews">
                +
            </div>
            <!-- 添加box -->
            <div class="add" v-if="isAdmin" @click="removeUsers">
                -
            </div>
        </div>
        <!-- 功能列表 -->
        <div class="list" v-for="(item,index) in pageDetailList" :key="index">
            <cell-list :itemList="item" @sendEvent="sendEvent" @switchChange='switchChange'></cell-list>
        </div>
        <!-- 退出群 -->
       <van-button color="#fff" block @click="quitGroup">删除并退出</van-button>
    </div>
</template>
<script>
import pageHeader from '../common/pageHeader';
import cellList from '../common/cellList';
import {Meteor} from 'meteor/meteor';
import { image, user,messages,friends, group, groupUser, indexMsg } from '../../../api/collections/index';
export default {
    data(){
        return{
        groupId:this.$route.params.id,
        id:sessionStorage.getItem('user'),
        pageDetailList:[
       {
        separate:false,
         moreList:[
           {
            describe:'群聊名称',
            icon:'',
            content:'',
            color:'',
            event:'changeGroupName'
           },
           {
              describe:'群二维码',
              icon:'',
              content:'',
              color:''
           },
            {
              describe:'群公告',
              icon:'',
              content:'',
              color:'',
              label:'',
              event:'notice'
           },
            {
              describe:'备注',
              icon:'',
              content:'',
              color:'',
              label:'',
              event:'changeGroupRemarks'
           }
         ]
        },
         {
          separate:true,
          describe:'查找聊天记录',
          icon:'',
          content:'',
          color:'',
          event:'foundChatRecord'
        },
         {
          separate:false,
         moreList:[
           {
              describe:'消息免打扰',
              icon:'',
              content:'',
              color:'',
              switch:true,
              checked:false,
              event:'no-ops',
              switch_event:'noToMsg'
           },
           {
              describe:'置顶聊天',
              icon:'',
              content:'',
              switch:true,
              checked:false,
              event:'no-ops',
              switch_event:'topChat'
           },
           {
              describe:'保存到通讯录',
              icon:'',
              content:'',
              switch:true,
              checked:false,
              event:'no-ops',
              switch_event:'saveContact'
           }
         ]
        },
        {
          separate:false,
         moreList:[
           {
              describe:'我在群里的昵称',
              icon:'',
              content:'',
              color:'',
              event:'changeGroupNickname'
           },
           {
              describe:'显示群成员昵称',
              icon:'',
              content:'',
              switch:true,
              checked:false,
              event:'no-ops',
              switch_event:'showNick'
           }
         ]
        }
        ]
        }
    },
     meteor: {
    $subscribe: {
      'userInf': []
    },
    groupUserList(){
        const list = groupUser.find({gid:this.groupId}).fetch()
        if(list){
            let arr = []
            list.forEach(e => {
                let obj = {}
                obj.name = e.groupRemark?e.groupRemark:e.groupName
                obj.id = e.userId
                const getUser = user.findOne({_id:e.userId})
                if(getUser){
                    const avatar = image.findOne({_id:getUser.avatarId})
                    obj.avatar = avatar.base64
                }
                arr.push(obj)
            })
            return arr
        }
    },
    isAdmin(){
        const groupInf = group.findOne({_id:this.groupId})
        if(groupInf){
            if(groupInf.g_adminId == this.id){
                return true
            }
            else{
                return false
            }
        }
    },
    groupInf(){
        const inf = group.findOne({_id:this.groupId})
        if(inf){
            this.pageDetailList[0].moreList[0].content = inf.g_name
            this.pageDetailList[0].moreList[2].label = inf.g_notice.content
        }
        const userInf = groupUser.findOne({gid:this.groupId,userId:this.id})
        if(userInf){
            this.pageDetailList[3].moreList[0].content = userInf.groupName
            this.pageDetailList[0].moreList[3].content = userInf.groupRemark
            this.pageDetailList[3].moreList[1].checked = userInf.showGroupItemNIck
        }
        const index = indexMsg.findOne({I_UserId:this.id,I_OtherId:this.groupId})
        if(index){
            this.pageDetailList[2].moreList[1].checked = index.I_isTop
        }
    }
    },
    components:{
        pageHeader,
        cellList
    },
    methods:{
        toLastPage(){
            this.$router.go(-1)
        },
        switchChange(e){
            switch(e.switch_event){
                case 'noToMsg':this.$notify({ type: 'success', message: '功能暂未开发',duration: 500 });break;
                case 'topChat':
                    Meteor.call('indexMsg.updateTopStatus',{
                    userId:this.id,
                    otherId:this.groupId,
                    isTop:e.checked
                    });
                    break;
                case 'saveContact':this.$notify({ type: 'success', message: '功能暂未开发',duration: 500 });break;
                case 'showNick':
                    Meteor.call('groupUser.updateShowNick',{
                        gid:this.groupId,
                        uid:this.id,
                        isShow:e.checked
                    });
                default:break;
            }
        },
        sendEvent(e){
            switch(e){
                case 'changeGroupName':this.$router.push(
                    {
                        path:`/alterPage/${this.groupId}/${e}`
                    }
                );break;
                case 'changeGroupRemarks':this.$router.push(
                    {
                        path:`/alterPage/${this.groupId}/${e}`
                    }
                );break;
                case 'changeGroupNickname':this.$router.push(
                    {
                        path:`/alterPage/${this.groupId}/${e}`
                    }
                );break;
                 case 'foundChatRecord':this.$router.push(
                    {
                        path:`/search/${this.groupId}/${e}`
                    }
                );break;
                case 'notice':this.$router.push('/groupNotice/'+this.groupId);break;
                case 'no-ops':break;
                default:this.$notify({ type: 'success', message: '功能暂未开发',duration: 500 });break;
            }
        },
        toUserDetail(e){
      this.$router.push('/userBase/'+e)
    },
    addNews(){
        this.$router.push('/addNews/'+this.groupId)
    },
    removeUsers(){
        this.$router.push('/removeUsers/'+this.groupId)
    },
    quitGroup(){
        if(this.isAdmin){
            this.$dialog.confirm({
                title: '退出群聊',
                message: '确定要解散当前群聊吗?',
                })
                .then(() => {
                Meteor.call('group.remove',this.groupId,(err,res)=>{
                    if(err){
                        this.$taost(err)
                    }else{
                        Meteor.call('groupUser.removeAll',this.groupId)
                        Meteor.call('indexMsg.removeAll',this.groupId)
                        Meteor.call('message.removeGroupAll',this.groupId)
                        this.$toast.success('群聊已解散')
                        this.$router.push('/home')
                    }
                })
                })
                .catch(() => {
                // on cancel
                });
        }
        else{
             this.$dialog.confirm({
                title: '退出群聊',
                message: '确定要退出当前群聊吗?',
                })
                .then(() => {
                Meteor.call('groupUser.deleteOne',{
                    gid:this.groupId,
                    uid:this.id
                },(err,res)=>{
                    if(err){
                        this.$toast(err)
                    }else{
                        Meteor.call('indexMsg.delete',{userId:this.id,otherId:this.groupId})
                        Meteor.call('message.removeGroupOne',{gid:this.groupId,uid:this.id})
                        this.$toast.success('已退出群聊')
                        this.$router.push('/home')
                    }
                })
                })
                .catch(() => {
                // on cancel
                });
        }
    }
    }
}
</script>
<style scoped>
.avatar-wrapper{
    padding: .2rem;
    background-color: #fff;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    margin-bottom: .4rem;
}
.avatar{
    width: 20%;
    padding: .3rem;
    box-sizing: border-box;
    text-align: center;
}
.name{
    font-size: .4rem;
    width: 100%;
    text-align: center;
     overflow:hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     -o-text-overflow:ellipsis; 
     color: #ADADAD;
}
.add{
    border-radius: .4rem;
   border:1px dashed #B7B7B7;
   width: 2rem;
   height: 2rem;
   margin: .3rem;
   text-align: center;
   font-size: 1.5rem;
   line-height: 2rem;
   color: #B7B7B7;
}
.van-button{
    color: #ff0000!important;
    font-weight: 700;
    margin-bottom: 1rem;
}
</style>